define(function (require, exports, module) {

  require("mixins/global.mixins.js");
  var mCard = require('andrew/card/index.js')
  var toastr = require("third/toastr/index.js");
  var api = require('service/api.js');
  var urlHelper = require("../../src/tools/urlHelper.js");


  var param = urlHelper.getUrlParamsMap();
  const edit = param.edit;
  var parentId = param.parentId;
  var id;
  var templet = param.templet;

  var pageVue = new Vue({
    data: {
      configForm: {
        id: 0,
        name: "",
        parentId: parentId,
        createTime: "",
        updateTime: "",
        groupIcon: "",
        dataFlag: "",
        position: "",
        templet: templet,
        toUrl: "",
        level: 3
      },
      dataFlagList:
        [
          { id: 1, text: "启用" },
          { id: 0, text: "停用" }
        ],
      imgUrl: "",
      positionList: [
        { id: "home", text: "主页" },
        { id: "category", text: "分类" }
      ],
      templetList: [
        
      ],
      homeTemplet: [
        {id: "carousel", text: "图片轮播"},
        {id: "buttonImg", text: "带图按钮"},
        {id: "categoryCard", text: "推荐分类"},
        {id: "buttonone", text: "按钮组一"},
        {id: "buttonTwo", text: "按钮组二"}
      ],
      categoryTemplet: [
        {id: "category", text: "普通分类"}
      ],
      detail: {
        CUSTOMER_NAME: ""
      },
      isCetagory: (templet == "categoryCard" || templet == "carousel") ? true : false,
      isButton: (templet == "buttonImg" || templet == "buttonone" || templet == "buttonTwo") ? true : false,
      isHaveIcon: (templet == "buttonImg" || templet == "carousel") ? true : false,
      allcategory: []
    },
    mounted: function () {
      if (edit) {
        id = param.id;
        this.loadData();
      }

      if(this.isButton){
        this.loadCategory();
      }

    },
    methods: {
      save: function () {
        var _this = this;
        var data = this.configForm;
        // delete data.id;
        console.log(data);
        $.ajax({
          type: 'POST',
          url: SAVE_CONFIG_GROUP_URL,
          contentType: 'application/json',
          data: JSON.stringify(data),
          dataType: "json",
          success: function (result) {
            if (result.errno == 0) {
              toastr.success("新增分类保存成功");
              console.log(this.configForm);
              _this.configForm = result.data;
              _this.configForm.toUrl = parseInt(result.data.toUrl);
              _this.imgUrl = result.data.groupIcon.indexOf("http") > -1 ? result.data.groupIcon : VIEW_IMG_URL + result.data.groupIcon;
              console.log("chatwin===================", this.configForm);
            }
            // alert(result);
          }
        });
      },
      onUpload(e) {
        var _this = this;
        var file = e.target.files[0];
        var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
        // var AllowImgFileSize = 10240;
        var reader = new FileReader();
        var imgUrlBase64;
        if (file) {
          //将文件以Data URL形式读入页面  
          imgUrlBase64 = reader.readAsDataURL(file);
          reader.onload = function (e) {
            if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
              toastr.error('上传失败，请上传不大于2M的图片！');
              return;
            }

            $.ajax({
              url: UPLOAD_FILE_URL,//这里是后台接口需要换掉
              type: 'POST',
              contentType: 'application/json',
              data: JSON.stringify({ img: reader.result }),
              dataType: "json",
              cache: false,
              processData: false,
              success: (res) => {
                if (res.errno === 0) {
                  var id = res.data.id;
                  _this.imgUrl = VIEW_IMG_URL + id;
                  console.log(_this.imgUrl);
                  _this.configForm.groupIcon = id;
                }
              },
              error: function (err) {
                toastr.error("网络错误");
              }
            });

          }
        }

      },
      loadData: function () {
        var _this = this;
        $.ajax({
          type: 'POST',
          url: QUERY_CONFIG_GROUP_URL + id,
          contentType: 'application/json',
          dataType: "json",
          success: function (result) {
            console.log(result);
            if (result.errno == 0) {
              _this.configForm = result.data;
              _this.configForm.toUrl = parseInt(result.data.toUrl);
              console.log(result.data.groupIcon);
              _this.imgUrl = result.data.groupIcon.indexOf("http") > -1 ? result.data.groupIcon : VIEW_IMG_URL + result.data.groupIcon;
            }
          }
        });
      },
      changeTemplate: function(arg){
        if(arg == 'home'){
          this.templetList = this.homeTemplet;
        }else if(arg == 'category'){
          this.templetList = this.categoryTemplet;
        }
      },
      querySearchAsync(queryString, callback) {
        if(queryString == undefined || queryString == "" || queryString == null)
          return;
        var list = [{}];
        console.log(queryString);
        $.ajax({
          type: 'POST',
          url: ARTICLE_URLS.ARTICLE_LIST_BY_NAME + queryString,
          contentType: 'application/json',
          dataType: "json",
          success: function (result) {
            if (result.errno == 0) {
              list = result.data; 
              searchdata = list;
              callback(list);
            }
          }
        });
      },

      handleSelect(item) {
        console.log(item);
        this.configForm.toUrl = item.id;
        this.configForm.name = item.value;
      },
      loadCategory(){
        var _this = this;
        $.ajax({
          type: 'POST',
          url: CATEGORY_URLS.GET_ALL_CATEGORY,
          contentType: 'application/json',
          dataType: "json",
          success: function (result) {
            _this.allcategory = result;
          }
        });
      }
    }
  }).$mount('#app')
})
